<script setup lang="ts">
import { computed, ref, watch, onMounted, PropType } from "vue";
import JInput from "@/components/j-input/index.vue";
import { useTokens } from "@/stores/tokens";
const tokens = useTokens();

const emit = defineEmits(["choose"]);
const items = ref<any[]>([]);
const prop = defineProps({
    curItem: {
        type: Object
    },
    keyWord: {
        type: String,
        default: "symbol"
    },
    list: {
        type: Array,
        required: true
    },
    isAll: {
        type: Boolean,
        default: true
    },
    disabled: {
        type: Boolean,
        default: false
    }
});
onMounted(() => {
    initItems();
});
const initItems = () => {
    items.value = prop.list;
    items.value.forEach(item => {
        item.img = getImg(item);
    });
};

const onChange = (val: any) => {
    console.log(val);
    emit("choose", val);
};

const search = ref("");
watch(
    () => prop.list,
    (newVal, oldVal) => {
        initItems();
    }
);

const filterList = computed<any[]>(() => {
    const key = search.value.toLowerCase();
    if (!key) {
        return items.value;
    }
    console.log(
        "过滤下拉列表",
        items.value.filter((i: any) => i.symbol.toLowerCase().includes(key))
    );
    return items.value.filter((i: any) => i.symbol.toLowerCase().includes(key));
});
const getImg = (item: any) => {
    return tokens.getImgByHash(item.contractAddress);
};
</script>
<template>
    <div class="y-menuipt">
        <v-menu location="bottom" transition="slide-y-reverse-transition" :disabled="disabled">
            <template v-slot:activator="{ props }">
                <slot :props="props" :item="curItem">
                    <div v-bind="props">
                        <div class="menuIpt px-2 c-title-5 d-flex justify-space-between">
                            <span class="m-txt" style="width: 120px">{{ curItem ? curItem[keyWord] : "" }}</span>
                            <v-icon style="color: #b1b6c6">mdi mdi-menu-down</v-icon>
                        </div>
                    </div>
                </slot>
            </template>

            <v-list class="v-pops">
                <div class="inp-box">
                    <JInput class="inp-t" v-model="search" @click.stop placeholder="search"></JInput>
                </div>

                <div class="inp-all">
                    <v-list-item @click="onChange(null)" v-if="isAll">
                        <v-list-item-title class="c-title-4 fld">ALL</v-list-item-title>
                    </v-list-item>
                    <v-list-item v-for="item in filterList" :key="item.name" @click="onChange(item)">
                        <v-list-item-title class="c-title-4 fld">
                            <img :src="item.img" class="i-cons" />
                            {{ item.symbol }}
                            <span class="bad c-title-4">({{ item.name }})</span>
                        </v-list-item-title>
                    </v-list-item>
                </div>
            </v-list>
        </v-menu>
    </div>
</template>
<style lang="scss" scoped>
.y-menuipt {
    .menuIpt {
        background: #171a1f;
        border-radius: 4px;
        border: 1px solid #272c31;
        // padding: 4px;
        padding: 4px 0 4px 0;
    }

    .m-txt {
        margin-right: 10px;
        white-space: nowrap;
        /* 防止换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 显示省略号 */
    }
}

.v-pops {
    width: 280px;
}

.fld {
    display: flex;
    align-items: center;
    width: 90%;
    overflow: hidden;

    &.c-title-4 {
        font-size: 14px !important;
    }
}

.i-cons {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

.bad {
    color: rgb(138, 138, 152);
    margin-left: 8px;
}

.inp-all {
    max-height: 300px;
    overflow: auto;
}

:deep(.j-input-txt) {
    padding-inline-start: 36px !important;
}

:deep(.j-input) {
    position: relative;

    &::after {
        position: absolute;
        left: 8px;
        top: 0;
        height: 100%;
        width: 30px;
        z-index: 1;
        display: block;
        content: "";
        background: url("@/assets/sousuo-2.svg") no-repeat center;
        background-size: auto 32%;
    }
}
</style>
